/* eslint-disable no-undef */
import React, { Component } from 'react';
import Card from '../../../components/card';
import './logisticsInfo.scss';
import DialogInfo from '../dialogInfo';
import Dialog from '../../../components/adsionli-dialog';

interface LogisticsInfoCardProps extends LogisticsInfo {
}

export default class LogisticsInfoCard extends Component<LogisticsInfoCardProps> {
    cardInfo: { title: string, width: string };
    state: {
        showDialog: boolean;
        dialogInfo: LogisticsInfo;
    }
    constructor (props: LogisticsInfoCardProps) {
        super(props);
        this.state = {
            showDialog: false,
            dialogInfo: {
                sid: '',
                logisticsCompany: '',
                logisticsInfo: [],
            },
        };
        this.cardInfo = {
            title: '物流信息',
            width: '35%',
        };
    }

    /**
     * @function handleDialog 处理弹窗事件
     */
    handleDialog () {
        const { sid, logisticsCompany, logisticsInfo } = this.props;

        this.setState({ showDialog: true, dialogInfo: { sid, logisticsInfo, logisticsCompany } });
    }
    /**
     * @function closeDialog 关闭dialog弹窗
     */
    closeDialog () {
        this.setState({ showDialog: false });
    }

    render () {
        const { title, width } = this.cardInfo;
        const { sid, logisticsCompany, logisticsInfo } = this.props;
        const firstInfo = logisticsInfo.length - 1;

        const { showDialog, dialogInfo } = this.state;
        return (
            <div style={{ height: '100%', width }}>
                <Card title={title} width={'100%'}>
                    {
                        <div className='logistics-info-container'>
                            <div className='logistics-info-header'><div>{logisticsCompany}</div>  <div>运单号：{sid}</div></div>
                            <p className='logistics-info-context'>{`${logisticsInfo[firstInfo].statusTime}${logisticsInfo[firstInfo].statusDesc}`}</p>
                            <div className='logistics-info-button-group'>
                                <button onClick={this.handleDialog.bind(this)}>查看物流</button>
                                <button>发货短信提醒</button>
                                <button>我要群发</button>
                            </div>
                        </div>
                    }
                </Card>
                <Dialog showClose={true} show={showDialog} onCancle={this.closeDialog.bind(this)} title={'物流信息'} >
                    {{ body: <DialogInfo {...dialogInfo} /> }}
                </Dialog>
            </div>
        );
    }
}
